<template>
  <div class="tuijianBox">
      <div class="title">
          <div class="left">
              <span :class="{active:flag === 1}" @click="change(1)">新碟</span>
              <div class="split"></div>
              <span :class="{active:flag === 2}" @click="change(2)">新歌</span>
          </div>
          <div class="right">
              <mu-btn :btnName="btnName"></mu-btn>
          </div>
      </div>
      <div class="contentBox">
        <div class="dishBox" v-if="flag === 1">
          <div class="part" v-for="item in dishList" :key="item.id">
            <div class="imgBox">
              <img :src="item.picUrl" alt="">
            </div>
            <div class="text"><span>{{item.name}}</span></div>
          </div>
        </div>
        <div class="newSongsBox" v-if="flag === 2">
          <div class="part" v-for="item in songsList" :key="item.id">
            <div class="imgBox">
              <img :src="item.picUrl" alt="">
            </div>
            <div class="text"><span>{{item.name}}</span></div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import MuBtn from '../../components/button'
import http from '@/utils/index'
import api from '@/utils/api'

export default {
  data () {
    return {
      current: 0,
      flag: 1,
      btnName: '更多新碟',
      dishList: [],
      songsList: []
    }
  },
  components: {
    MuBtn
  },
  created () {
    this.tuijianSongs(api.newDish, 1)
    this.tuijianSongs(api.newSongs, 2)
  },
  methods: {
    handleSwipe (item) {
      this.$emit('handleItem', item)
    },
    change (type) {
      this.flag = type
      if (type === 1) {
        this.btnName = '更多新碟'
      } else {
        this.btnName = '新歌推荐'
      }
    },
    // 推荐新碟/新歌
    tuijianSongs (api, type) {
      var params = {}
      if (type === 1) {
        params = {
          offset: 0,
          limit: 3
        }
      }
      http.request(api, params, 'GET')
        .then((res) => {
          if (res.code === 200) {
            type === 1 ? this.dishList = res.albums : this.songsList = res.result.slice(0, 3)
          }
        })
    }
  }
}
</script>

<style scoped>
.tuijianBox{
  width: 94%;
  margin:auto;
}
.title{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.title .left{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title .left .split{
  width: 3rpx;
  height: 25rpx;
  background: rgba(0, 0, 0, 0.5);
  margin:0 15rpx;
}
.title .left .active{
  font-weight: bold;
}
.contentBox .dishBox,.contentBox .newSongsBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}
.contentBox .part{
  position: relative;
  width: 30%;
  height: 300rpx;
  margin-top:15px;
  overflow: hidden;
  cursor: pointer;
}
.contentBox .part .imgBox{
  width: 100%;
  height: 75%;
  border-radius: 5px;
}
.contentBox .part .imgBox img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.contentBox .part .text{
  width: 100%;
  height: 25%;
  line-height: 35rpx;
  font-size: 24rpx;
  margin-top: 10rpx;
  /* white-space:w; */
  overflow: hidden;
  white-space:normal;
  text-overflow: ellipsis;

}
.contentBox .part .playCount{
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  font-size: 22rpx;
  margin:5rpx 15rpx 0 0 ;
  justify-content: flex-start;
  align-items: center;
}
.contentBox .part .playCount i{
  font-size: 22rpx;
}
.contentBox .part .tips{
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  max-height: 75rpx;
  /* padding: 10rpx; */
  line-height: 35rpx;
  padding: 0 10rpx;
  color: #fff;
  font-size: 22rpx;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
